<template>
  <a-card title="用户列表">
    <template #extra>
      <a href="#" @click="addHandel">创建用户</a>
    </template>

    <a-table
      :dataSource="dataSource"
      :columns="columns"
      bordered
      :pagination="false"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'index'"> {{ index + 1 }} </template>
        <template v-else-if="column.key === 'role'">
          {{ record.role ? record.roleInfo?.label || "" : "" }}
        </template>
        <template v-else-if="column.key === 'avatar'">
          <a-avatar :src="record.avatar" :size="32" />
        </template>
        <template v-else-if="column.key === 'action'">
          <a href="#" @click="editHandel(record)">编辑</a>
          <a-divider type="vertical" />
          <a href="#" @click="delHandel(record)">删除</a>
        </template>
      </template>
    </a-table>
  </a-card>
  <a-modal
    v-model:open="open"
    :title="formState.id ? '编辑' : '创建'"
    :footer="false"
  >
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item label="id" name="id" v-show="formState.id">
        <a-input v-model:value="formState.id" disabled />
      </a-form-item>
      <template v-if="!formState.id">
        <a-form-item
          label="手机号"
          name="phone"
          :rules="[{ required: true, message: '请输入手机号!' }]"
        >
          <a-input-number v-model:value="formState.phone" style="width: 100%" />
        </a-form-item>
        <a-form-item
          label="密码"
          name="pwd"
          :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password v-model:value="formState.pwd" style="width: 100%" />
        </a-form-item>
      </template>

      <a-form-item
        label="用户名"
        name="name"
        :rules="[{ required: true, message: '请输入用户名!' }]"
      >
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item
        label="角色"
        name="role"
        :rules="[{ required: true, message: '请选择角色!' }]"
      >
        <a-select v-model:value="formState.role">
          <a-select-option
            :key="role.id"
            :value="role.id"
            v-for="role in roleListData"
          >
            {{ role.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="别名"
        name="nickname"
        :rules="[{ required: true, message: '请输入别名!' }]"
      >
        <a-input v-model:value="formState.nickname" />
      </a-form-item>
      <a-form-item label="年龄" name="age">
        <a-input-number v-model:value="formState.age" style="width: 100%" />
      </a-form-item>
      <a-form-item label="头像" name="avatar">
        <FormUpload v-model:value="formState.avatar" style="width: 100%" />
      </a-form-item>
      <a-form-item label="签名" name="description">
        <a-textarea
          v-model:value="formState.description"
          :auto-size="{ minRows: 2, maxRows: 5 }"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 4, span: 20 }">
        <a-button type="primary" html-type="submit">
          {{ formState.id ? "更新" : "创建" }}
        </a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { userList, userDel, userAdd, userEdit } from "@/api/user";
import { roleList } from "@/api/role";

import FormUpload from "@/components/FormUpload";
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone",
  },
  {
    title: "用户名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "别名",
    dataIndex: "nickname",
    key: "nickname",
  },
  {
    title: "签名",
    dataIndex: "description",
    key: "description",
  },
  {
    title: "头像",
    dataIndex: "avatar",
    key: "avatar",
  },
  {
    title: "角色",
    dataIndex: "role",
    key: "role",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
  },
];
// 数据
const dataSource = ref([]);

// 表单
const formState = ref({
  id: "",
  phone: "",
  name: "",
  nickname: "",
  age: 0,
  description: "",
  avatar: "",
  role: "",
});

// 弹窗
const open = ref(false);
// 角色列表
const roleListData = ref([]);

/**
 * 获取用户列表
 */
const getUserList = async () => {
  const { msg, success, data } = await userList();
  if (success) {
    dataSource.value = data.rows || [];
  } else {
    dataSource.value = [];
    message.error(msg);
  }
};

/**
 * 编辑
 * @param {*} record
 */
const editHandel = (record) => {
  console.log(record);
  formState.value = {
    id: record.id,
    phone: record.phone,
    name: record.name,
    nickname: record.nickname,
    age: record.age,
    description: record.description,
    avatar: record.avatar,
    role: record.role,
  };
  open.value = true;
};
/**
 * 删除
 * @param {*} record
 */
const delHandel = async (record) => {
  console.log(record);
  const { msg, success } = await userDel({ id: record.id });
  if (success) {
    message.success(msg);
    getUserList();
  } else {
    message.error(msg);
  }
};

const addHandel = () => {
  console.log("添加用户");
  formState.value = {
    id: "",
    phone: "",
    name: "",
    nickname: "",
    description: "",
    avatar: "",
    role: "",
  };
  open.value = true;
};

/**
 * 成功
 * @param {*} values
 */
const onFinish = (values) => {
  console.log("Success:", values);
  submitForm(formState.value);
};
/**
 * 失败
 * @param {*} errorInfo
 */
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

const roleListMaps = async () => {
  const { msg, success, data } = await roleList();
  if (success) {
    roleListData.value = data.rows || [];
  } else {
    roleListData.value = [];
  }
};

const submitForm = async (value) => {
  console.log(value);
  const { msg, success } = value.id
    ? await userEdit(value)
    : await userAdd(value);
  if (success) {
    message.success(msg);
    open.value = false;
    getUserList();
  } else {
    message.error(msg);
  }
};

onMounted(() => {
  getUserList();
  roleListMaps();
});
</script>
<style lang='scss' scoped>
</style>